<template>
  <div id="app">
    <div class="main">
      <Home v-if="activeIndex === 0"/>
      <Classify v-if="activeIndex === 1"/>
      <Car v-if="activeIndex === 2"/>
      <My v-if="activeIndex === 3"/>
    </div>
    <div class="footer">
      <b @click="activeIndex = 0" :class="activeIndex === 0 ? 'active': ''">首页</b>
      <b @click="activeIndex = 1" :class="activeIndex === 1 ? 'active': ''">分类</b>
      <b @click="activeIndex = 2" :class="activeIndex === 2 ? 'active': ''">购物车</b>
      <b @click="activeIndex = 3" :class="activeIndex === 3 ? 'active': ''">我的</b>
    </div>
  </div>
</template>

<script>
import Home from "./views/Home.vue";
import Classify from "./views/Classify.vue";
import Car from "./views/Car.vue";
import My from "./views/My.vue";
export default {
  name: "App",
  data() {
    return {
      activeIndex: 0
    }
  },
  components: {
    Home,
    Car,
    Classify,
    My
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body,#app {
  width: 100%;
  height : 100%;

}

#app {
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
}

.footer {
  height: 36px;
  display: flex;
  justify-content: space-around;
  align-items: center;

}

.footer b.active {
  color: red
}
</style>